/* Copyright 2012 The Go Authors.  All rights reserved.
 * Use of this source code is governed by a BSD-style
 * license that can be found in the LICENSE file.
 */
'use strict';

/* Directives */

angular.module('tour.directives', []).

  // autofocus makes the element selectable sets the focus to it.
  directive('autofocus', function() {
  	return function(scope, elm, attrs) {
  		elm.attr('tabindex', 0).focus();
  	}
  }).

  // onpageup executes the given expression when Page Up is released.
  directive('onpageup', function() {
    return function(scope, elm, attrs) {
      elm.keyup(function(evt) {
		var key = evt.key || evt.keyCode;
		if (key == 33) { scope.$apply(attrs.onpageup); }
      });
    };
  }).

  // onpagedown executes the given expression when Page Down is released.
  directive('onpagedown', function() {
    return function(scope, elm, attrs) {
      elm.keyup(function(evt) {
		var key = evt.key || evt.keyCode;
		if (key == 34) { scope.$apply(attrs.onpagedown); }
      });
    };
  }).

  // verticalSlide creates a sliding separator between the left and right elements.
  // e.g.:
  // <div id="header">Some content</div>
  // <div vertical-slide top="#header" bottom="#footer"></div>
  // <div id="footer">Some footer</div>
  directive('verticalSlide', function() {
    return function(scope, elm, attrs) {
      elm.addClass("vertical-slide");
 
      elm.draggable({
        axis: "x",
        drag: function(event, ui) {
          var x = event.clientX;
          if (x < 0) {
            x = 0;
          }
          if (x > $(window).width()) {
            x = $(window).width();
          }
          $(attrs.left).width(x);
          $(attrs.right).offset({left: x});
          return true;
        },
        containment: "parent",
      });
    }
  }).

  // horizontalSlide creates a sliding separator between the top and bottom elements.
  // <div id="menu">Some menu</div>
  // <div vertical-slide left="#menu" bottom="#content"></div>
  // <div id="content">Some content</div>
  directive('horizontalSlide', function() {
    return function(scope, elm, attrs) {
      elm.addClass("horizontal-slide");
      elm.draggable({
        axis: "y",
        drag: function(event, ui) {
          var y = event.clientY;
          var top = $(attrs.top).offset().top;
          if (y < top) {
            y = top;
          }
          $(attrs.top).height(y - top);
          $(attrs.bottom).offset({top:y, height:0});
          return true;
        },
        containment: "parent",
      });
    }
  }).

  // toggle makes the element react to clicks by displaying the selected element.
  // The selected element itself is hidden initially and everytime the mouse leaves
  // its area. 
  directive('toggle', function() {
    return function(scope, elm, attrs) {
      var target = $(attrs.toggle);
      target.mouseleave(function() {
        target.toggle(250);
      });

      elm.click(function() {
        target.toggle(250);
      });

      target.hide();
    }
  }).

  // lesson shows a lesson with the lesson name and description obtained from the backend.
  directive('lesson', function() {
    return {
      restrict: 'E',
      templateUrl: '/partials/lesson.html',
      scope: true, // create a new scope per directive
      controller: ['$scope', 'Module', function($scope, Module) {
        $scope.load = function(name) {
          Module(name, function(mod) {
            $scope.name = name;
            $scope.title = mod.Title;
            $scope.description = mod.Description;
          })
        };
      }],
      link: function(scope, iElement, iAttrs) {
        scope.load(iAttrs.name);
      },
    };
  });
